@layout('layouts/page')

@section('content')

<div id="iconPanel"  class="twelve">
	<a id="loginKey" href="{{url('dashboard/profile')}}">{{HTML::image('img/icons/userinfo.png', 'testing')}}<br/>User Profile</a>
	<a id="loginKey" href="{{url('help')}}">{{HTML::image('img/icons/access.png', 'testing')}}<br/>Setup ACL</a>
</div>

      @include('plugins.errorPlugins')
<div class="twelve columns panel">
	{{ Form::open_for_files('user/profile', 'POST') }}
	<div id="profileImage" class="four columns">
		<div class="imgContainer">
		@if($userInfo->imgpath == '')
			{{ HTML::image('avatar/avatar.png','user photo',array('id'=>'photo')) }}
		@else
			{{ HTML::image($userInfo->imgpath,$userInfo->name,array('id'=>'photo')) }}
		@endif
		</div>
<!-- 		<div id='file_browse_wrapper' class="centered"> -->
		{{ Form::file('photo',array('onchange'=>"handleFiles(this.files);")) }}
<!-- 		</div>
		<span>Change</span> -->
	</div>
	<div class="four columns">
		{{ Form::label('name', 'Name') }}
		{{ Form::text('fullname',$userInfo->fullname) }}
		{{ Form::label('dob', 'Date of Birth') }}
		{{ Form::text('dob',date('d-m-Y',strtotime($userInfo->dob))) }}
		{{ Form::label('emel', 'Email') }}
		{{ Form::text('emel',$userInfo->emel) }}
	</div>
	<div class="four columns">
		{{ Form::label('address', 'Address') }}
	    {{ Form::textarea('address',$userInfo->address) }}
		{{ Form::label('postcode', 'Postcode') }}
	    {{ Form::text('postcode',$userInfo->postcode) }}
	    {{ Form::submit('Kemaskini',array('style'=>'float:right'))}}
	</div>
	{{ Form::close()}}

</div>

@endsection

@section('scripts')
<script>
jQuery(document).ready(function($) {
    $( "[name='dob']" ).datepicker({
      changeMonth: true,
      changeYear: true,
      showButtonPanel: true,
      dateFormat: 'dd-mm-yy'
    });
});
</script>
<script>
function handleFiles(files) {

//ref:https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Example.3A_Showing_thumbnails_of_user-selected_images

  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var imageType = /image.*/;
     
    if (!file.type.match(imageType)) {
      continue;
    }
  
    $('#photo').remove();

    var img = document.createElement("img");
    var id=document.createAttribute("id");
    id.value="photo";
    img.classList.add("preview");
    img.setAttributeNode(id);
    img.file = file;
    $("div .imgContainer").css("opacity",0.9);
    $(".imgContainer").append(img);

    var nFiles = files.length;
    var nBytes = file.size;

    for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
        sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
    }

    $("p #fileSize").text(sOutput);
     
    var reader = new FileReader();
    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
    reader.readAsDataURL(file);
  }
}

</script>
@endsection
